<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>系统监控</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="{{ url_for('static', filename='system/admin/css/other/analysis.css') }}"/>
</head>

<body>
    <div class="pear-container">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-xs6 layui-col-md3">
                <div class="layui-card top-panel">
                    <div class="layui-card-header">CPU使用率</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;"
                                id="cpuUsage">
                                0%
                            </div>
                            <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                                <svg viewBox="0 0 1024 1024" class="icon">
                                    <path d="M716.8 0H307.2C137.5488 0 0 137.5488 0 307.2v409.6c0 169.6512 137.5488 307.2 307.2 307.2h409.6c169.6512 0 307.2-137.5488 307.2-307.2V307.2c0-169.6512-137.5488-307.2-307.2-307.2z" fill="#D8F4EE"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6 layui-col-md3">
                <div class="layui-card top-panel">
                    <div class="layui-card-header">内存使用率</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;"
                                id="memoryUsage">
                                0%
                            </div>
                            <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                                <svg viewBox="0 0 1024 1024" class="icon">
                                    <path d="M716.8 0H307.2C137.5488 0 0 137.5488 0 307.2v409.6c0 169.6512 137.5488 307.2 307.2 307.2h409.6c169.6512 0 307.2-137.5488 307.2-307.2V307.2c0-169.6512-137.5488-307.2-307.2-307.2z" fill="#D8F4EE"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6 layui-col-md3">
                <div class="layui-card top-panel">
                    <div class="layui-card-header">磁盘使用率</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;"
                                id="diskUsage">
                                0%
                            </div>
                            <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                                <svg viewBox="0 0 1024 1024" class="icon">
                                    <path d="M716.8 0H307.2C137.5488 0 0 137.5488 0 307.2v409.6c0 169.6512 137.5488 307.2 307.2 307.2h409.6c169.6512 0 307.2-137.5488 307.2-307.2V307.2c0-169.6512-137.5488-307.2-307.2-307.2z" fill="#D8F4EE"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6 layui-col-md3">
                <div class="layui-card top-panel">
                    <div class="layui-card-header">系统运行时间</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;"
                                id="uptime">
                                0天
                            </div>
                            <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                                <svg viewBox="0 0 1024 1024" class="icon">
                                    <path d="M716.8 0H307.2C137.5488 0 0 137.5488 0 307.2v409.6c0 169.6512 137.5488 307.2 307.2 307.2h409.6c169.6512 0 307.2-137.5488 307.2-307.2V307.2c0-169.6512-137.5488-307.2-307.2-307.2z" fill="#D8F4EE"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md8">
                <div class="layui-card">
                    <div class="layui-card-header">CPU使用率趋势</div>
                    <div class="layui-card-body">
                        <div id="cpuChart" style="height:400px;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header">系统信息</div>
                    <div class="layui-card-body">
                        <table class="layui-table" lay-skin="line">
                            <colgroup>
                                <col width="120">
                                <col>
                            </colgroup>
                            <tbody>
                                <tr>
                                    <td>操作系统</td>
                                    <td id="osInfo">-</td>
                                </tr>
                                <tr>
                                    <td>Python版本</td>
                                    <td id="pythonVersion">-</td>
                                </tr>
                                <tr>
                                    <td>CPU核心数</td>
                                    <td id="cpuCores">-</td>
                                </tr>
                                <tr>
                                    <td>总内存</td>
                                    <td id="totalMemory">-</td>
                                </tr>
                                <tr>
                                    <td>系统时间</td>
                                    <td id="systemTime">-</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        layui.use(['layer', 'echarts', 'element', 'count'], function () {
            var $ = layui.jquery,
                layer = layui.layer,
                element = layui.element,
                count = layui.count,
                echarts = layui.echarts;

            // CPU使用率图表初始化
            var cpuChart = echarts.init(document.getElementById('cpuChart'), 'walden');
            var cpuData = [];
            var cpuTimes = [];
            
            // 图表配置
            var cpuOption = {
                title: {
                    text: 'CPU使用率实时监控'
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: cpuTimes,
                    axisLabel: {
                        rotate: 30
                    }
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: 100,
                    name: '使用率(%)'
                },
                series: [{
                    name: 'CPU使用率',
                    type: 'line',
                    smooth: true,
                    data: cpuData,
                    itemStyle: {
                        normal: {
                            color: '#16baaa'
                        }
                    }
                }]
            };
            cpuChart.setOption(cpuOption);

            // 获取系统监控数据
            function getSystemMonitorData() {
                $.ajax({
                    url: "{{ url_for('system.adminMonitor.ajax_polling') }}",
                    type: "get",
                    success: function(res) {
                        console.log('系统监控数据响应:', res);
                        if(res.code === 0) {
                            const data = res.data;
                            
                            // 更新基础数据
                            $("#cpuUsage").text(data.cpus_percent + "%");
                            $("#memoryUsage").text(data.memory_usage + "%");
                            
                            // 获取C盘使用率
                            const cDrive = data.disk_partitions_list.find(disk => disk.device === "C:\\");
                            $("#diskUsage").text((cDrive?.percent || 0) + "%");
                            
                            // 更新系统信息
                            $("#osInfo").text(data.basic_info.system_version || "-");
                            $("#pythonVersion").text(data.basic_info.python_version || "-");
                            $("#cpuCores").text(data.cpu_count + "核");
                            $("#totalMemory").text((data.memory_total / 1024 / 1024 / 1024).toFixed(2) + "GB");
                            $("#systemTime").text(new Date().toLocaleString());
                            
                            // 更新CPU图表
                            const now = new Date().toLocaleTimeString();
                            cpuData.push(data.cpus_percent);
                            cpuTimes.push(now);
                            
                            // 保持最近30个数据点
                            if (cpuData.length > 30) {
                                cpuData.shift();
                                cpuTimes.shift();
                            }
                            
                            cpuChart.setOption({
                                xAxis: {
                                    data: cpuTimes
                                },
                                series: [{
                                    data: cpuData
                                }]
                            });
                        }
                    }
                });
            }

            // 初始化数据
            getSystemMonitorData();

            // 定时刷新数据
            setInterval(getSystemMonitorData, 3000);

            // 窗口大小变化时重绘图表
            window.addEventListener('resize', function() {
                cpuChart.resize();
            });
        });
    </script>
</body>

</html>